<template>
  <div v-if="Object.keys(inspectionReportItemData).length> 0" class="item-menu-main inspection-report">
    <div>
      <div class="inspection-report-header">
        <h4>{{ inspectionReportItemData.jcxmmc }}</h4>
      </div>
      <ul class="details-list">
        <li>
          <h6>就诊流水号</h6>
          <p>{{ inspectionReportItemData.jzlsh }}</p>
        </li>
        <li>
          <h6>检查类别</h6>
          <p>{{ inspectionReportItemData.jclb }}</p>
        </li>
        <li>
          <h6>检查部位</h6>
          <p>{{ inspectionReportItemData.jcbw }}</p>
        </li>
        <li>
          <h6>检查所见</h6>
          <p>{{ inspectionReportItemData.jcsj }}</p>
        </li>
      </ul>
    </div>
    <ol class="inspection-report-footer">
      <li>患者检查时间：{{ inspectionReportItemData.hzjcsj }}</li>
      <li>报告日期时间：{{ inspectionReportItemData.bgsj }}</li>
    </ol>
  </div>
  <div v-else>
    <el-empty description="暂无数据" />
  </div>
</template>

<script>
export default {
  name: 'InspectionReport',
  props: {
    inspectionReportItemData: {
      type: Object,
      default() {
        return {}
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.inspection-report{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .details-list{
    li{
      padding:10px 0;
      margin-bottom: 5px;
      cursor: pointer;
      h6{
        margin-bottom:10px;
        padding-left: 8px;
        border-left: 4px solid #29CBDA;
        font-size: 14px;
        color: #565656;
      }
      p{
        padding-left: 12px;
        font-size: 14px;
        font-weight: bold;
        color: #565656;
      }
    }
  }
  .inspection-report-footer{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    li{
      margin-right: 10px;
      font-size: 16px;
      color: #565656;
    }
  }
}
</style>
